/**
 * @file: 
 * @author: Lengxx
 * @date: 2024-07-15
 */
<template>
  <div class="screen-wrapper h-full" ref="screenRef" >
    <Header />
    <div class="screen-wrapper-inner flex justify-between bg-[#22284a] h-full text-white">
      <div class="w-[300px] p-2 flex flex-col">
        <BaseInfoCmpt />
        <CustomerSourceChart />
      </div>
      <div class="flex-grow flex flex-col" >
        <RoomLayoutChartCmpt />
        <IncomeChartCmpt />
      </div>
      <div class="w-[300px] p-2" >
        <div class="bg-[#181c41] h-full rounded"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import Header from './components/Header.vue'
import { BaseInfoCmpt } from './components/BaseInfoCmpt'
import { IncomeChartCmpt } from './components/IncomeChartCmpt'
import { RoomLayoutChartCmpt } from './components/RoomLayoutChartCmpt'
import { CustomerSourceChart } from './components/CustomerSourceCmpt'

const screenRef = ref();

</script>

<style lang="less" scoped>

.screen-wrapper {
  .screen-wrapper-inner {
    height: calc(100vh - 176px);
  }
}

</style>
